<template>
  <div id="container">
    <nav-bar-item path="/products/productProfile">
      <div slot="img">
        <el-image
          style="width: 300px; height: 200px"
          :src="url1"></el-image>
      </div>
      <div slot="text" ><el-link >操作系统</el-link></div>
    </nav-bar-item>

    <nav-bar-item path="/products/productProfile">
      <div slot="img">
        <el-image
          style="width: 300px; height: 200px"
          :src="url2"></el-image>
      </div>
      <div slot="text" ><el-link >操作系统</el-link></div>
    </nav-bar-item>

    <nav-bar-item path="/products/productProfile">
      <div slot="img">
        <el-image
          style="width: 300px; height: 200px"
          :src="url3"></el-image>
      </div>
      <div slot="text" ><el-link >操作系统</el-link></div>
    </nav-bar-item>


  </div>
</template>

<script>
  import NavBarItem from "../../../common/navBarItem/navBaritem";
  export default {
    name: "container1",
    components: {NavBarItem},
    data(){
      return {
        url1: require("assets/img/container4.jpg"),
        url2: require("assets/img/container5.jpg"),
        url3: require("assets/img/container6.png"),
      }
    }
  }
</script>

<style scoped>
  #container{
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 49px;
    background-color: #f8f8f8;
    padding-top: 30px;
    margin-top: 0;
  }

</style>
